<template>
    <div class="container">
        <div class="m-header">
            <div class="location" @click="setAddress">
                <i class="iconfont icon-daohangdizhi"></i>
                <span>{{name}}</span>
                <i class="iconfont icon-jiantouyou"></i>
            </div>
            <div @click="showCode=true" class="follow">
                关注“探亲”公众号
            </div>
        </div>
        <transition name="opacity">
            <quick-mark v-show="showCode" @close="showCode=false"></quick-mark>
        </transition>
    </div>
</template>

<script type="text/ecamscript-6">
import Bus from "@/commom/js/bus";
import quickMark from "@/components/mHeader/quickMark";
export default {
  data() {
    return {
      showCode: false,
      name: "",

    };
  },
  components: {
    quickMark
  },
  created() {
    // 点击地址列表选择社区，H5的localStorage属性接受社区名称变量
    this.name = sessionStorage.getItem("setname");

    let _this = this;
    this.$axios({
      method: "get",
      url: "http://47.104.186.142:80/delivery/commOne"
    }).then(res => {
      _this.name = res.data.data.name;

      if (!sessionStorage.getItem("setname")) {
        _this.name = this.name;
      } else {
        this.name = sessionStorage.getItem("setname");
      }
    });
  },
  methods: {
    setAddress() {
      this;
      this.$router.push({
        path: "/address"
      });
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~commom/stylus/mixin';

.m-header {
    position: fixed;
    top: 0;
    background: #f20c00;
    height: 44px;
    width: 100%;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;

    .location {
        color: #ffffff;
        font-size: 14px;
        extent-click();

        .icon-daohangdizhi {
            margin-right: 8px;
            font-size: 14px;
        }

        .icon-jiantouyou {
            margin-left: 10px;
            font-size: 14px;
        }
    }

    .follow {
        background: #ffffff;
        height: 25px;
        line-height: 25px;
        color: #f20c00;
        font-size: 12px;
        padding: 0 5px;
        border-radius: 3px;
        extent-click();
    }
}

.opacity-enter-active, .opacity-leave-active {
    transition: opacity 0.5s;
}

.opacity-enter, .opacity-leave-to {
    opacity: 0;
}
</style>